<template>
	<text class="iconfont icon-xiangzuojiantou"></text>
	<view class="header">
		<text>改签座位</text>
	</view>
	<view class="tips">
		<text>提示：请选择</text>
		<text class="active">新的座位</text>
		<text>和新的订单</text>
		<text class="active">时间</text>
	</view>
	<view class="time">
		<scroll-view class="scroll-view-day" scroll-x="true">
			<text @click="timeFn(v)" v-for="v in items" :key="v" :class="[v==current?'active':'']">{{v}}</text>
		</scroll-view>
	</view>
	<view class="content">
		<view class="top">
			<view>
				<view style="background: #aaaaaa;"></view>
				<text>已满</text>
			</view>
			<view>
				<view style="background: #81d3f8;"></view>
				<text>空闲</text>
			</view>
			<view>
				<view style="background: #d94154;"></view>
				<text>已选</text>
			</view>
		</view>
		<view class="seat">
			<scroll-view class="scroll-view-seat" scroll-x="true">
				<view v-for="v in desk_rows.data" :key="v.seatId">
					<text>{{v.sname}}</text>
					<view :class="[v2.state==1?'':v2.state==2?'active1':'active2']" v-for="v2 in v.orderSeats" :key="v2.osid" @click="selectFn(v2)">{{time2Fn(v2.orderTime)}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<button class="footer" @click="editFn">立即改签</button>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'
	import store from '../../store/index.js'
	import http from '../../utils/http.js'
	let items = reactive(['周一（05.08）', '周二（05.09）', '周三（05.10）','周四（05.11）','周五（05.12）','周六（05.13）','周日（05.14）']);
	let current = ref('周一（05.08）');
	let desk_rows=reactive({data:[]});
	let searchId=reactive([]);
	let timeFn=function(v){
		current.value=v
	}
	let time2Fn=function(time){
		let time1=time.substring(0,5)
		let time2=time.substring(8,14)
		return time1+time2
	}
	const render=function(){
		let areaId=store.state.order.areaId;
		console.dir(JSON.parse(JSON.stringify(store.state.order)))
		http({
			url:'/orderseat/queryall',
			method:'post',
			data:{
				"areaId":areaId
			}
		}).then((res)=>{
			if(res.code==0){
				console.log(res);
				desk_rows.data=res.data
			}else{
				// console.log(res.msg);
				uni.showToast({
					title: '获取失败',
					icon:'error',
					duration: 2000
				});
			}
		})
	}
	let selectFn=function(v){
		if(v.state==1){
			return
		}else{
			if(v.state==2){
				v.state=0;
				searchId.push(v.osid)
				console.log(searchId);
			}else{
				v.state=2
				for(let i=0;i<searchId.length;i++){
					if(v.osid==searchId[i]){
						searchId.splice(i,1)
					}
				}
			}
		}
	}
	let editFn=function(){
		http({
			url:'/orderseat/updateSeat',
			method:'put',
			data:{
				"aids": searchId,
				"bids": store.state.order.bids,
				"myorderId": store.state.order.orderId
			}
		}).then((res)=>{
			if(res.code==0){
				console.log(res);
				uni.showToast({
					title: '修改成功',
					icon:'success',
					duration: 2000
				});
				setTimeout(()=>{
					uni.switchTab({
						url:'/pages/Orders/Orders',
					})
				},1000)
				
			}else{
				// console.log(res.msg);
				uni.showToast({
					title: '修改失败',
					icon:'error',
					duration: 2000
				});
			}
		})
	}
	onMounted(()=>{
		render();
	})
	
</script>

<style lang="less" scoped>
	@import url("../../static/fonts/iconfont.css");

	.icon-xiangzuojiantou {
		font-size: 32rpx;
		font-weight: bolder;
		position: fixed;
		top: 24rpx;
		left: 30rpx;
	}

	.header {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #eee;
	}

	.tips {
		height: 80rpx;
		background: #f7efe5;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		& .active {
			color: #c69b50;
		}
	}
	.time{
		display: flex;
		white-space: nowrap;
		width: 750rpx;
		&>.scroll-view-day{
			display: flex;
			align-items: center;
			margin: 0 10rpx;
			height: 80rpx;
			border-bottom: 1px solid #eee;
			& text{
				display: inline-block;
				width: 180rpx;
				height: 50rpx;
				font-size: 26rpx;
				margin: 0 4rpx;
				line-height: 50rpx;
				background: #ffffff;
				text-align: center;
			}
			& .active{
				border-bottom: 4rpx solid #c6964f;
				color: #c6964f;
			}
		}
	}
	.content{
		width: 100%;
		padding-bottom: 100rpx;
		&>.top{
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			&>view{
				display: flex;
				margin: 40rpx 0;
				&>view{
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
					border-radius: 4rpx;
				}
				&>text{
					font-size: 28rpx;
				}
			}
		}
		&>.seat{
			display: flex;
			white-space: nowrap;
			width: 100%;
			& .scroll-view-seat{
				display: flex;
				justify-content: space-between;
				align-items:flex-start;
				margin: 0 10rpx;
				// height: 880rpx;
				
				& view{
					width: 180rpx;
					// height: 880rpx;
					margin-right: 50rpx;
					display: inline-block;
					&>text{
						display: inline-block;
						width: 180rpx;
						text-align: center;
						font-size: 28rpx;
						// outline: 1px solid red;
					}
					&>view{
						display: inline-block;
						width: 180rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 4rpx;
						margin: 30rpx 0;
						background: #aaaaaa;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 26rpx;
						color: #fff;
						text-align: center;
					}
					&>.active1{
						background: #81d3f8;
					}
					&>.active2{
						background: #d94154;
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		color: #fff;
		padding: 0;
		margin: 0;
		background: #c6964f;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		border-radius: 0;
	}
</style>
